$(function(){
	var vm = new Vue({
		el:"#jd-detail",
		data:{
			goods_number:1,
			color_index:2,
			size_index:1,
			version_index:0,
			src_index: 2,
			price:'1299',
			// 存的是外层数组里的内层数组的下标
			selected_enture: [],
			goodsSel:{
				src:['img/5825a5a6Nde8ecb75.jpg!q70.jpg','img/583ced0fN27e50577.jpg!q70.jpg','img/58cb5c42N1ce8b049.jpg!q70.jpg','img/58eb4354N60429827.jpg!q70.jpg'],
				color:['铂光金','冰河银','玫瑰金','天海蓝'],
				size:['全网通（4GB 64GB）','全网通（4GB 32GB）'],
				version:['官方标配','套装版'],
				entrue:[
					[
						{name: '屏碎保1年', price: '¥79.00'},
						{name: '无理由2年', price: '¥66.00'}
					],
					[
						{name: '1年内换新', price: '¥78.00'},
						{name: '延长保1年', price: '¥67.00'},
						{name: '延长保2年', price: '¥68.00'},
						{name: '售后上门取送', price: '¥90.00'}
					],
					[
						{name: '屏碎保2年', price: '¥80.00'},
						{name: '修换随心', price: '¥95.00'},
						{name: '电池爆炸保', price: '¥96.00'},
						{name: '电池换新', price: '¥97.00'}
					]
				]
			}
		},
		methods:{
			add:function(){
				if(this.goods_number >=50){
					return
				}
				this.goods_number++;
			},
			reduce:function(){
				if(this.goods_number <=1){
					return;
				}
				this.goods_number--;
			},
			colorClick: function(index){
				this.color_index = index;
				this.src_index = index;
			},
			sizeClick: function(index){
				this.size_index = index;
				if(this.version_index==1){
					this.size_index=1;
				}
			},
			versionClick: function(index){
				this.version_index = index;
			},
			append: function(one_array_index, two_array_index, event){
				var $dom = $(event.target).parent();
				var cla = $dom.attr("class").indexOf('active');
				$dom.toggleClass('active');
				$dom.siblings().removeClass('active');

				// 不存在avtive，说明当前没有选中，需要设置为选中状态
				if(cla == -1){
					this.selected_enture[one_array_index] = two_array_index;
				}else{
					this.selected_enture[one_array_index] = undefined;
				}

				var temp = [];
				for(var i=0; i<this.selected_enture.length; i++){
					// 如果内层数组里面没有选中的数据，则跳出循环
					if(this.selected_enture[i] == undefined){
						continue;
					}
					// 如果有选中的数据，则将此下标添加到temp数组里面
					temp[i] = this.selected_enture[i];
				}
				// 清空数组，将下标添加进去
				this.selected_enture.length = 0;
				this.selected_enture = temp;

			},
		}
	});
	vm.$watch("goods_number",function(newVal,oldVal){
		if(newVal >50 || newVal<1 || isNaN(newVal)){
			this.goods_number = oldVal;
		}
	},{deep:true},{immediate: true});

	vm.$watch("size_index",function(){
		if(this.size_index==0){
			this.version_index!=1;
			this.price = '1699';
		}else if(this.size_index==1 && this.version_index==0){
			this.price = '1299';
		}else if(this.size_index==1 && this.version_index==1){
			this.price = '1399';
		}
	},{deep:true},{immediate: true});


	$('.jd-header-coll i').toggle(function(){
		$('.jd-header-menu').slideDown();
	},function(){
		$('.jd-header-menu').slideUp();
	});
	var mySwiper = new Swiper ('.jd-section-li-first .swiper-container', {
        direction: 'horizontal',
        initialSlide :0,
        onSlideChangeEnd: function(swiper){
        	console.log('当前:'+swiper.activeIndex+',最后：'+swiper.isEnd);
    		$('.swiperPoint span').html(swiper.activeIndex+1);
    		if(swiper.isEnd){
	    		changeTab();
	    	}
        }
    });

    // var mySwiper2 = new Swiper ('.sale-body .swiper-container', {
    //     initialSlide :0,
    //     slidesPerView: 3,
    //     breakpoints: {
    //         1024: {
    //             slidesPerView: 4,
    //             spaceBetween: 40
    //         },
    //         768: {
    //             slidesPerView: 3,
    //             spaceBetween: 30
    //         },
    //         640: {
    //             slidesPerView: 2,
    //             spaceBetween: 20
    //         },
    //         320: {
    //             slidesPerView: 1,
    //             spaceBetween: 10
    //         }
    //     }
    // });

    $('.jd-header-back').click(function(){
    	if($('.jd-header-my .goods a').attr('class').indexOf('active')!=-1){
    		location.replace('my.html');
    	}else{
    		window.location.reload();
    	}
    });
    function changeTab(){
    	$('.jd-header-my .details a').addClass('active');
		$('.jd-header-my .details').siblings().find('a').removeClass('active');
		$('.jd-section-li-second').css('display','block');
		$('.jd-section-li-second').siblings().css('display','none');
    }

    $('.sale-banner .set').on('touchstart',function(e){
    	var clientX=e.clientX;
    	var left=$(this).offset();
    	var disX=clientX - left.left;
    	console.log(clientX,left,disX);
    	console.log('disX:'+disX);
    	$(this).on('touchmove',function(event){
    		$(this).stop().animate({left:e.clientX-disX+'px'});
    	});
    	$(this).on('touchend',function(){
    		$(this).off('touchend');
    		$(this).off('touchmove');
    	});
    })

    $('.toPic span').click(function(){
    	changeTab();
    });
    $('.pro-sale .slide-bg').toggle(function(){
    	$(this).addClass('active');
    	$('.pro-sale .sale-con a').addClass('active');
    	$('.coll-hide-inline').css('display','block');
    	$('.coll-hide').css('display','inline-block');
    	$('.pro-sale .sale-con').removeClass('active');
    },function(){
    	$(this).removeClass('active');
    	$('.coll-hide-inline').css('display','inline-block');
    	$('.coll-hide').css('display','none');
    	$('.pro-sale .sale-con').addClass('active');
    	$('.pro-sale .sale-con a').removeClass('active');
    });
    $(document).on('scroll load',function(){
		if($(document).scrollTop()>=200){
			$('.fixed-toUp').css('display','block');
		}else if($(document).scrollTop()<670){
			$('.fixed-toUp').css('display','none');
		}
	});
	$('.fixed-toUp').click(function(){
		$(document).scrollTop(0);
	});
	// 点击显示商品选择框
	$('.select-type .selected .more').on('click',function(){
		$('.goods-selectable').show();
		$('.mask').show();
	});
	// 点击关闭弹出的商品选择框
	$('.goods-selectable .goods-show .close').on('click',function(){
		$('.goods-selectable').hide();
		$('.mask').hide();
	});
	// 点击切换页面
	$('.jd-header-my li').click(function(){
		$(this).find('a').addClass('active');
		$(this).siblings().find('a').removeClass('active');
		$('.jd-section .jd-section-li').eq($(this).index()).css('display','block');
		$('.jd-section .jd-section-li').eq($(this).index()).siblings().css('display','none');
	})

});